<!-- 待审批需求详情展示 -->
<template>
    <div>
        <!-- 基本信息 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>基本信息</span>
                </div>
            </div>
            <div class="content">
                <div class="one">
                    <div class="first">
                        <span class="name">需求编号：</span>
                        <span class="con">{{ details.id }}</span>
                    </div>
                    <div class="first">
                        <span class="name">需求名称：</span>
                        <span class="con">{{ details.demandName }}</span>
                    </div>
                    <div class="first">
                        <span class="name">申请人：</span>
                        <span class="con">{{ details.realName }}</span>
                    </div>
                </div>
                <div class="one">
                    <div class="first">
                        <span class="name">申请部门：</span>
                        <span class="con">{{ details.deptName }}</span>
                    </div>
                    <div class="first">
                        <span class="name">创建时间：</span>
                        <span class="con">{{ details.createTime }}</span>
                    </div>
                </div>
                <div class="desc">
                    <span class="name">需求描述：</span>
                    <span class="con">{{ details.demandDesc }}</span>
                </div>
                <div class="desc">
                    <span class="name">附件：</span>
                    <div v-for="item of fileEntityList" :key="item.fileId" class="text">
                        <el-link :href="item.downloadPath">{{ item.fileName }}</el-link>
                    </div>
                </div>
                <span class="divider" />
                <div class="statue">
                    <span class="name">是否对外开放：<el-tag :type="openStatus()" effect="dark" size="small">{{ details.isOpen === true ? '已开放' : '未开放' }}</el-tag></span>
                </div>
            </div>
        </div>
        <!-- 部审信息 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>部审信息</span>
                </div>
            </div>
            <div class="content">
                <div class="one">
                    <div class="first">
                        <span class="name">部门审批人：</span>
                        <span class="con">{{ details.deptApprover }}</span>
                    </div>
                </div>
                <div class="one">
                    <div class="first">
                        <span class="name">部门审批意见：</span>
                        <span class="con">{{ details.deptRemark }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 终审信息 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>终审信息</span>
                </div>
            </div>
            <div class="content">
                <div class="one">
                    <div class="first">
                        <span class="name">是否通过：
                            <el-switch v-model="isPass" active-color="#409eff" active-text="是" />
                        </span>
                    </div>
                </div>
                <div class="one">
                    <div class="first">
                        <span class="name">审批意见：</span>
                        <span><el-input v-model="remark" style="margin-top: 10px; width: 300px;" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" /></span>
                    </div>
                </div>
                <div style="text-align: center; padding-bottom: 20px;">
                    <el-button type="primary" style="margin-right: 20px;" @click="doSubmit">确认提交</el-button>
                    <router-link :to="{name: 'ApprovalInformationIndex'}">
                        <el-button type="primary" plain>取消</el-button>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ApprovalInformationDetails',
    data() {
        return {
            remark: '',
            details: {},
            isPass: false,
            fileEntityList: []
        }
    },
    created() {
        this.details = this.$route.query // 获取基本信息数据
        this.details.isOpen = this.$route.query.isOpen === 'true' // 数据类型转换
        this.fileEntityList = this.$route.query.fileEntityList // 获取文件数据做转换
        setTimeout(() => { // 页面刷新
            this.$forceUpdate()
        }, 200)
    },
    methods: {
        openStatus() { // 是否对外开放
            return this.details.isOpen === false ?  'info' : 'success'
        },
        doSubmit() { // 确认提交
            var param = {pass: this.isPass === true ? 1 : 0, remark: this.remark}
            this.putEditStatusRequest('/sys/approve/demand/super/editStatus/' + parseInt(this.details.id), param).then(resp => {
                if (resp.status === 200) {
                    this.$router.push({path: '/approval_information/index'})
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.basic {
    margin: 20px;
    background: #fff;
}
.header {
    padding-top: 15px;
    padding-bottom: 15px;
}
.first {
    display: flex;
    margin-left: 40px;
    margin-bottom: 25px;
    align-items: center;
}
.one {
    display: flex !important;
}
.name {
    min-width: 62px;
    color: #888;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
}
.desc {
    display: flex;
    margin-left: 20px;
    margin-bottom: 25px;
}
.divider {
    display: block;
    border-bottom: solid 1px #f3f3f3;
}
.title {
    margin-left: 20px;
}
.statue {
    margin-left: 20px;
    padding-bottom: 15px;
    margin-top: 15px;
}
.con {
    font-size: 14px;
}
i {
    font-style: normal;
}
.text {
    font-size: 14px;
}
</style>
